<template>
  <!-- 预览 -->
  <div>
    <el-dialog title="题目预览" :visible="showDialog" @close="btnCancel()">
      <el-row type="flex" justify="center">
        <el-col>
          [题型]:
          <span v-if="list.questionType === '1'">单选</span>
          <span v-else-if="list.questionType === '2'">多选</span>
          <span v-else>简答</span>
        </el-col>
        <el-col>[编号]: {{ list.id }}</el-col>
        <el-col>
          [难度]:
          <span v-if="list.difficulty === '1'">一般</span>
          <span v-else-if="list.difficulty === '2'">简单</span>
          <span v-else>困难</span>
        </el-col>
        <el-col>[标签]:{{ list.tags }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col>[学科]:{{ list.subjectName }}</el-col>
        <el-col>[目录]:{{ list.directoryName }}</el-col>
        <el-col>[方向]:{{ list.direction }}</el-col>
        <el-col></el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col>
          [题干]:
          <span v-html="list.question" style="color:blue;"></span>
        </el-col>
        <el-col v-show="list.questionType === '3' ? false:true">
          {{list.questionType==='1'? '单':'多' }}选题选项:
          <el-radio
            v-model="radio"
            v-for="item in list.options"
            :key="item.id"
            :label="item.isRight"
            @change="rdClick()"
          >{{ item.title }}</el-radio>
        </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col>
          [参考答案]:
          <el-button type="danger" size="small" @click="clickvideo()">答案视频解析</el-button>
          <div v-if="videostate" style="margin-top:20px;">
            <video
              :src="list.videoURL"
              style="width:200px;height:100px;"
              controls="controls"
              autoplay
            ></video>
          </div>
        </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col>
          [答案解析]:
          <span v-html="list.answer"></span>
        </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col>[题目备注]:{{ list.remarks }}</el-col>
      </el-row>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="btnCancel()">关闭</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { ChoiceList } from '@/api/choice'
export default {
  name: '',
  components: {},
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    user: {
      type: [String, Number],
      default: null // 没有默认值
    }
  },
  data() {
    return {
      list: [],
      radio: 1,
      videostate: false
    }
  },
  computed: {},
  watch: {},
  created() {
    this.ChoiceList()
  },
  mounted() {},
  methods: {
    clickvideo() {
      this.videostate = !this.videostate
    },
    async ChoiceList() {
      const { data } = await ChoiceList(this.user)
      this.list = data
      console.log(66666666666)
    },
    rdClick() {
      this.radio = 1
    },
    btnCancel() {
      this.$emit('update:showDialog', false)
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
